<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">楼宇名称：</span>

      <el-input clearable placeholder="请输入楼宇名称" class="search-main" />

      <el-button type="primary" class="search-btn">查询</el-button>

    </div>

    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button
        type="primary"
        @click="flagOk"
      >添加楼宇</el-button>

    </div>

    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="parklist">
        <el-table-column type="index" label="序号" />
        <!-- prop="给表格关联字段" -->
        <el-table-column label="楼宇名称" prop="name" />
        <el-table-column label="层数" prop="floors" />
        <el-table-column label="在管面积(m²)" prop="area" />
        <el-table-column label="物业费(m²)" prop="propertyFeePrice" />
        <el-table-column label="状态" prop="status">
          <template v-slot="{row}">
            <span>{{ row.status === 0?'空置中':'租赁中' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180">

          <template v-slot="{row}">
            <el-button size="mini" type="text">编辑</el-button>
            <el-button v-if="!row.demoFlag" size="mini" type="text">删除</el-button>
            <el-button v-else size="mini" type="text" disabled>删除</el-button>
          </template>

        </el-table-column>
      </el-table>

    </div>

    <div class="page-container">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>

    <!-- 添加楼宇 -->
    <!-- :visible.sync="flag"显示状态 -->
    <el-dialog
      title="添加楼宇"
      width="580px"
      :visible.sync="flag"
    >
      <!-- 表单接口 -->
      <div class="form-container">
        <el-form ref="parklist" :model="parklist" :rules="parklistRules">
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="parklist.name" />
          </el-form-item>

          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="parklist.floors" />
          </el-form-item>

          <el-form-item label="在管面积" prop="area">
            <el-input v-model="parklist.area" />
          </el-form-item>

          <el-form-item label="物业费" prop="propertyFeePrice">
            <el-input v-model="parklist.propertyFeePrice" />
          </el-form-item>

        </el-form>
      </div>

      <template #footer>
        <el-button size="mini">取 消</el-button>
        <el-button size="mini" type="primary">确 定</el-button>
      </template>
    </el-dialog>

  </div>

</template>

<script>
import { getParkListAPI } from '@/api/park'
export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      parklist: [],
      flag: false,
      parklistRules: {

      }
    }
  },
  async created() {
    const res = await getParkListAPI({
      page: this.page,
      pageSize: this.pageSize
    })
    // console.log(res)
    this.parklist = res.data.rows
    this.total = res.data.total
  },
  methods: {
    flagOk() {
      // console.log(1)
      this.flag = true
    }
  }
}
</script>

<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn{
    margin-left:20px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
